<!-- 种群健康证明，新增 -->
<template>
    <el-drawer
        :model-value="isShowAdd"
        size="800"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
        <template #header>
            <strong style="font-weight: bold; color: #000;">新增健康证明</strong>
        </template>
        <template #default>
            <el-form :model="form" label-width="auto" style="max-width: 800px">
                <el-form-item label="送检日期">
                    <el-date-picker style="width: 100%;" v-model="form.inspectionDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择送检日期" />
                </el-form-item>
                <el-form-item label="报告日期">
                    <el-date-picker style="width: 100%;" v-model="form.reportDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择报告日期" />
                </el-form-item>
                <el-form-item label="检测机构">
                    <el-input v-model="form.examinationAgency" placeholder="应经省级以上动物防疫机构检测" />
                </el-form-item>
                <el-form-item label="布鲁氏菌抗体检测">
                    <div style="width: 100%;">
                        <el-input style="width: 48%; margin-right: 4%;" v-model="form.brucellaNegativeRate"><template #prepend>阴性率(%)</template></el-input>
                        <el-input style="width: 48%;" v-model="form.brucellaPositiveRate"><template #prepend>阳性率(%)</template></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="牛结核病">
                    <div style="width: 100%;">
                        <el-input style="width: 48%; margin-right: 4%;" v-model="form.bovineTbNegativeRate"><template #prepend>阴性率(%)</template></el-input>
                        <el-input style="width: 48%;" v-model="form.bovineTbPositiveRate"><template #prepend>阳性率(%)</template></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="口蹄疫免疫抗体">
                    <div style="width: 100%;">
                        <el-input style="width: 48%; margin-right: 4%;" v-model="form.footAndMouthAAntibodyRate"><template #prepend>A型抗体合格率(%)</template></el-input>
                        <el-input style="width: 48%;" v-model="form.footAndMouthOAntibodyRate"><template #prepend>O型抗体合格率(%)</template></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="口蹄疫病原学检测">
                    <div style="width: 100%;">
                        <el-input style="width: 48%; margin-right: 4%;" v-model="form.footAndMouthPathogenNegativeRate"><template #prepend>阴性率(%)</template></el-input>
                        <el-input style="width: 48%;" v-model="form.footAndMouthPathogenPositiveRate"><template #prepend>阳性率(%)</template></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="上传化验报告">
                    <el-upload 
                        ref="uploadRef"
                        class="upload-demo" 
                        action="/api/upload/file"
                        :auto-upload="false"
                        :show-file-list="true"
                        :limit="1"
                        :on-change="onChange"
                        :on-remove="handleRemove"
                        :on-exceed="handleExceed"
                    >
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelHandler">取消</el-button>
                <el-button type="primary" @click="confirmHandler">保存</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { uploadFileOne, reqGetFealthCertificateAddOrUpdate } from '@/api/healthManage'
import { ElMessage } from 'element-plus'


let props = defineProps(['isShowAdd']) // 接收父组件的数据
let $emit = defineEmits(['closeAddDrawer']) // 自定义事件

// 表单收集
const form = reactive({
    inspectionDate: '', // 送检日期
    reportDate: '', // 报告日期
    examinationAgency: '', // 检测机构
    brucellaNegativeRate: '', // 布鲁氏菌抗体检测-阴性率 (%)
    brucellaPositiveRate: '', // 布鲁氏菌抗体检测-阳性率 (%)
    bovineTbNegativeRate: '', // 牛结核病-阴性率 (%)
    bovineTbPositiveRate: '', // 牛结核病-阳性率 (%)
    bovineTbPositiveRate: '', // 牛结核病-阳性率 (%)
    footAndMouthAAntibodyRate: '', // 口蹄疫-A型抗体合格率 (%)
    footAndMouthOAntibodyRate: '', // 口蹄疫-O型抗体合格率 (%)
    footAndMouthPathogenNegativeRate: '', // 口蹄疫病原学检测-阴性率 (%)
    footAndMouthPathogenPositiveRate: '', // 口蹄疫病原学检测-阳性率 (%)
    reportUrl: '', // 化验报告url
})
// 清空表单
const closeForm = () => {
    form.inspectionDate = '', // 送检日期
    form.reportDate = '', // 报告日期
    form.examinationAgency = '', // 检测机构
    form.brucellaNegativeRate = '', // 布鲁氏菌抗体检测-阴性率 (%)
    form.brucellaPositiveRate = '', // 布鲁氏菌抗体检测-阳性率 (%)
    form.bovineTbNegativeRate = '', // 牛结核病-阴性率 (%)
    form.bovineTbPositiveRate = '', // 牛结核病-阳性率 (%)
    form.bovineTbPositiveRate = '', // 牛结核病-阳性率 (%)
    form.footAndMouthAAntibodyRate = '', // 口蹄疫-A型抗体合格率 (%)
    form.footAndMouthOAntibodyRate = '', // 口蹄疫-O型抗体合格率 (%)
    form.footAndMouthPathogenNegativeRate = '', // 口蹄疫病原学检测-阴性率 (%)
    form.footAndMouthPathogenPositiveRate = '', // 口蹄疫病原学检测-阳性率 (%)
    form.reportUrl = '' // 化验报告url
}

// 上传化验报告
const onChange = (data) => {
    const file = data.raw
    const fd = new FormData()
    fd.append('file', file)
    uploadFileOne(fd).then((res) => {
        if(res.status == 200){
            form.reportUrl = res.data
        }
    })
}
// 移除上传
const handleRemove = () => {
    form.reportUrl = ''
}
// 覆盖
let uploadRef = ref('')
const handleExceed = (files) => {
    uploadRef.value.clearFiles()
    uploadRef.value.handleStart(files[0])
}


// 取消按钮
const cancelHandler = () => {
    closeForm()
    $emit('closeAddDrawer', false)
    uploadRef.value.clearFiles() // 清空上传
}

// 保存按钮
const confirmHandler = async () => {
    let res = await reqGetFealthCertificateAddOrUpdate(form)
    if(res.status == 200){
        ElMessage({
            message: res.msg,
            type: 'success',
        })
        $emit('closeAddDrawer', false)
        closeForm()
        uploadRef.value.clearFiles() // 清空上传
    }
}
</script>

<style scoped lang="scss">

</style>